<template>
    <el-row class="instMan">
        <el-col :span="10">
            <el-row style="height: 40px;margin-bottom: 14px;position: relative;">
<!--                <el-input placeholder="请输入内容" style="width: 300px;margin-right: 20px;"></el-input>-->
<!--                <el-button type="primary" style="width: 100px;">搜索</el-button>-->
                <el-button @click="addInst" type="primary" style="width: 100px;position: absolute;right: 0;">新增机构
                </el-button>
            </el-row>
            <el-table :data="insts"
                      size="mini"
                      highlight-current-row
                      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                      @current-change="instChge"
                      border
                      height="730"
                      max-height="730"
                      style="border: 1px solid rgb(247,247,247);font-size: 16px;">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-form label-position="left" size="mini" inline class="demo-table-expand">
                            <el-form-item label="地址 : ">
                                <span>{{ scope.row.addr }}</span>
                            </el-form-item>
                            <el-form-item label="联系人 : ">
                                <span>{{ scope.row.linkMan }}</span>
                            </el-form-item>
                            <el-form-item label="电话 : ">
                                <span>{{ scope.row.linkTel }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="creCode" label="机构信用代码" min-width="120"></el-table-column>
                <el-table-column label="机构名称" min-width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column width="160">
                    <template slot="header" slot-scope="scope">
                        操作
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" style="font-size: 16px;" @click="editInst( scope.row )">修改
                        </el-button>
                        <el-button size="mini" type="text" style="font-size: 16px;" @click="checkDept( scope.row )">查看部门
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" class="pagination">
                <el-pagination
                        @size-change="sizeChge"
                        @current-change="pgChge"
                        :current-page="instPage.currentPage"
                        :page-sizes="[15, 50, 100, 200]"
                        :page-size="instPage.pageSize"
                        layout="->, sizes, prev, pager, next, jumper, total"
                        :total="instPage.totalElements">
                </el-pagination>
            </el-row>
        </el-col>
        <el-col :span="14">
            <el-row style="height: 40px;margin-bottom: 14px;position: relative;">
                <el-button type="text" size="mini" style="margin-left: 10px;font-size: 16px;" v-model="inst.name">
                    {{inst.name ? inst.name + ' 部门' : "点击【查看部门】按钮进行查看或编辑"}}
                </el-button>
<!--                <el-button type="primary" style="width: 100px;height: 40px;position: absolute;right: 120px;">导出</el-button>-->
                <el-button @click="addFirstDept" type="primary" style="position: absolute;right: 0;">新增部门</el-button>
            </el-row>
            <el-row style="height: 730px;overflow-y: auto;background-color: #ffffff;">
                <el-row style="line-height: 35px;color: #909399;background: #e5ecf1;font-weight: bold;">
                    <el-col :span="6" style="padding-left: 32px;font-size: 16px;">
                        部门编码
                    </el-col>
                    <el-col :span="14" style="text-align: right;font-size: 16px;">
                        部门名称
                    </el-col>
                    <el-col :span="4" style="text-align: center;font-size: 16px;">
                        操作
                    </el-col>
                </el-row>
                <el-tree style="padding: 10px;" :data="depts" :props="deptProps" :default-expand-all="defaultExpandAll"
                         node-key="uuid" :expand-on-click-node="false" @node-click="deptChge">
                    <el-row slot-scope="{ node, data }" style="display: inline-block;width: 100%;position: relative;">
                        <el-col :span="6" style="font-size: 16px;">{{data.code}}</el-col>
                        <el-col :span="14" style="text-align: right;font-size: 16px;">
                            {{node.label}}
                        </el-col>
                        <el-col :span="4" style="text-align: center;">
                            <span class="treeBtn" @click="addDept(data)" style="font-size: 16px;">
                                添加子部门
                            </span>
                            <span class="treeBtn" @click="editDept(data)" style="font-size: 16px;">
                                修改
                            </span>
                        </el-col>
                    </el-row>
                </el-tree>
            </el-row>
        </el-col>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addInst v-if="addShow" slot="edit" @editState="editState"></addInst>
                <editInst v-if="editShow" slot="edit" :instUuid="inst.uuid" Uuid="uuid"
                          @editState="editState"></editInst>
                <addFirstDept v-if="addFirstDpShow" slot="edit" :dpInstUuid="inst.uuid"
                              @editState="editState"></addFirstDept>
                <addDept v-if="addDpShow" slot="edit" :dpInstUuid="inst.uuid" :deptUuid="dept.uuid"
                         @editState="editState"></addDept>
                <editDept v-if="editDpShow" slot="edit" :dpInstUuid="inst.uuid" :deptUuid="dept.uuid"
                          @editState="editState"></editDept>
            </floatingBox>
        </transition>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo, replaceSpacesObj} from '../../../utils/webUtils.js';
    import floatingBox from "../../public/floatingBox.vue";
    import editInst from "./editInst.vue";
    import addInst from "./addInst.vue";
    import addFirstDept from "./addFirstDept.vue";
    import editDept from "./editDept.vue";
    import addDept from "./addDept.vue";

    export default {
        name: "instMan",
        components: {floatingBox, addInst, editInst, addFirstDept, addDept, editDept},
        data() {
            return {
                editBoxShow: false,
                addShow: false,
                editShow: false,
                addFirstDpShow: false,
                addDpShow: false,
                editDpShow: false,
                inst: {
                    uuid: '',
                    name: ''
                },
                instEdit: false,
                insts: [],
                instPage: {
                    pageSize: 15,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {}
                },
                defaultExpandAll: true,
                dept: {
                    uuid: '',
                    fstAdd: false
                },
                deptEdit: false,
                depts: [],
                deptProps: {
                    children: 'subDepts',
                    label: 'name'
                }
            }
        },
        mounted() {
            this.queryInsts();
        },
        methods: {
            editState(msg) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.instEdit = msg;
                this.addShow = msg;
                this.addFirstDpShow = msg;
                this.addDpShow = msg;
                this.deptEdit = msg;
                this.editDpShow = msg;
                this.queryInsts();
                if (this.dept.fstAdd || this.dept.uuid) {
                    this.queryDepts();
                }
            },
            addInst() {
                this.editBoxShow = true;
                this.addShow = true;
                this.editShow = false;
                this.instEdit = false;
            },
            editInst(val) {
                this.inst.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.instEdit = true;
                this.addShow = false;
            },
            addFirstDept() {
                this.editBoxShow = true;
                this.addFirstDpShow = true;
                this.dept.fstAdd = true;
            },
            addDept(val) {
                this.dept.uuid = val.uuid;
                this.editBoxShow = true;
                this.addDpShow = true;
                this.deptEdit = true;
            },
            editDept(val) {
                this.dept.uuid = val.uuid;
                this.editBoxShow = true;
                this.editDpShow = true;
                this.deptEdit = true;
            },
            instChge( val ) {
                if (this.instEdit) {
                    this.inst.uuid = val.uuid;
                }
            },
            queryInsts: function () {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/inst/search/findAll",
                    params: getDataForSP(this.instPage)
                }).then(response => {
                    this.insts = response.data.content;
                    writePageInfo(this.instPage, response.data);
                }).catch(error => {
                    console.log(error);
                });
            },
            sizeChge: function (pageSize) {
                this.instPage.pageSize = pageSize;
                if (this.instPage.currentPage === 1) {
                    this.queryInsts();
                }
                this.instPage.currentPage = 1;
            },
            pgChge: function (currentPage) {
                this.instPage.currentPage = currentPage;
                this.queryInsts();
            },
            checkDept(val) {
                this.inst.uuid = val.uuid;
                this.inst.name = val.name;
                this.dept.uuid = '';
                this.queryDepts();
            },
            deptChge( val) {
                console.log(val);
                if (this.deptEdit) {
                    this.dept.uuid = val.uuid;
                }
            },
            queryDepts: function () {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/inst/" + this.inst.uuid + "/dept"
                }).then(response => {
                    this.depts = response.data;
                }).catch(error => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped>
    .instMan {
        margin-right: 30px;
    }



    .treeBtn {
        font-size: 14px;
        cursor: pointer;
        color: #66b1ff;
    }

    .treeBtn:hover {
        color: #8AC4FF;
    }
</style>